<template>
  <div class="wrapper">
    <el-row style="width: 100%">
      <el-col :span="6" :offset="16">
        <div class="form">
          <div class="form-item" style="display: flex;align-items: center;justify-content: space-between">
            <img src="../../assets/LowBay_LOGO.png" alt="LOGO" style="height: 100%">
          </div>
          <div class="form-item" style="display: flex;align-items: center;justify-content: space-between">
            <div style="font-size: 14px;font-weight: bold;">登录方式：</div>
            <div>
              <el-select v-model="value" placeholder="请选择:" style="height: 16px">
                <el-option
                  v-for="option in identity"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="form-item">
            <el-input v-model="username" placeholder="用户名..."></el-input>
          </div>
          <div class="form-item">
            <el-input v-model="password" placeholder="密码..." show-password></el-input>
          </div>
          <div class="form-item">
            <el-button type="primary" @click="login()" style="width: 100%">登录</el-button>
          </div>
          <div class="form-item" style="display: flex;justify-content: flex-end">
            <el-link class="link" type="primary">忘记用户名</el-link>
            <el-link class="link" type="primary">忘记密码</el-link>
            <el-link class="link" type="primary" href="/#/regist">免费注册</el-link>
          </div>
        </div>
      </el-col>
    </el-row>


  </div>
</template>

<style scoped>
.wrapper{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: none;
}
.form{
  opacity:1;
  font-size: 16px;
  width: 25em;
  height: 30em;

  display: flex;
  flex-direction: column;
  align-items: center;

  background-image: url("../../assets/LowBay_login_background_TextItem_regular(1).png");

}
.form-item{
  width: 80%;
  height: 40px;
  margin-top: 20px;
}
.link{
  margin-right: 10px;
}
</style>

<style>
.el-input__inner{
  height: 35px;
}
</style>

<script>
import axios from "axios";

export default {
  name:'login_component',
  data(){
    return{
      value:'3',
      identity:[
        { value:'3',
          label:'买家'
        },{
          value:'2',
          label:'卖家'
        },{
          value:'1',
          label:'供货商'
        }],
      username:'customer',
      password:'123',

    }
  },
  methods:{
    login:async function (){

      let obj={
        type_id:this.value,
        user_account:this.username,
        login_password:this.password
      }
      //安全检查直接省略
      this.$store.dispatch('user/login',obj).then(()=>{
        this.$message.success('登陆成功！')
        console.log(this.value)
        this.$store.state.user.type_id=Number.parseInt(this.value);
        setTimeout(()=>{
          this.$router.push('/customer');
        },1000);
      }).catch((e)=>{
        // this.$message.error(e);
        this.$message.error('登陆错误')
      })

    }
  },
  mounted() {

  },
  created() {

  }
}
</script>
